<template>
  <div class="container">
    <div class="btnClose" @click="$router.back()">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <myinput
      type="text"
      name="username"
      placeholder="用户名/手机号"
      err_message="请输入5-11位的用户名"
      :rule="/^[0-9A-Za-z_]{5,11}$/"
      @input="InputHandle"
    ></myinput>
    <myinput
      type="password"
      name="password"
      placeholder="密码"
      err_message="请输入6-18位的密码"
      :rule="/^[0-9A-Za-z_~!@#$%^&*()_+.]{3,18}$/"
      @input="InputHandle"
    ></myinput>
    <mybutton @handleLogin="loginHandle">登录</mybutton>
  </div>
</template>

<script>
//引入字体文件的css文件
import iconfont from "@/assets/font/iconfont.css";
//引入封装input输入框
import Myinput from "@/components/myinput.vue";
//引入封装的button登录按钮
import Mybutton from "@/components/mybutton.vue";
// 引入axios
import { userLogin } from "@/api/index.js";
import { setToken, setUserInfo } from "@/utils/myToken";
export default {
  components: {
    Myinput,
    Mybutton,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //数据的传递，子传父
    InputHandle(obj) {
      // console.log(this)
      // console.log(obj)
      // if(obj.text){
      //     // 给父的data中的username添加输入框存储数据
      //     this.username = obj.text
      // }else if(obj.password){
      //     // 给父的data中的password添加输入框存储数据
      //     this.password = obj.password
      // }
      //获取对象的所有键名称，从数组中提取第一项
      const key = Object.keys(obj)[0];
      //获取对象的所有值，从数组中提取第一项
      const value = Object.values(obj)[0];
      // console.log(key,value);
      this[key] = value;
    },
    loginHandle() {
      // 准备发送请求所需的参数
      // if(!this.username || !this.password){
      //     return alert('用户名或密码不能为空')
      // }
      userLogin({ username: this.username, password: this.password })
        .then((res) => {
          console.log(res);
          if (res.data.message === "登录成功") {
            //保存token值到本地存储
            // localStorage.setItem('token',res.data.data.token)
            setToken(res.data.data.token);
            // console.log(res.data.data.user)
            setUserInfo(res.data.data.user);
            // 为什么 this.$toast 能调用轻提示。
            //    答：
            //      1. 所有的 VueComponent 组件都是 Vue 的实例(继承于Vue)
            //      2. Vue.use(Toast) 底层把 Toast 挂载到了 Vue 的原型上
            //      3. 组件内部的 this 指向组件本身
            //      4. Vue 组件继承与 Vue，所以 Vue 原型上的方法在组件内也能调用
            this.$toast.success("欢迎入坑喔");
            // 需要升级：登录成功后，不能都去个人中心，从文章详情过来应该要回去文章详情页
            // this.$router.push("/userinfo");
            if (this.$route.params.target) {
              // 根据 target 的值，替换成原来的页面
              this.$router.replace(this.$route.params.target);
            } else {
              // 没有 target 的情况，替换成个人中心页
              this.$router.replace("/userinfo");
            }
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 24/360 * 100vw;
}
.btnClose {
  .iconfont {
    font-size: 28/360 * 100vw;
  }
}
.logo {
  text-align: center;
  .iconfont {
    font-size: 126/360 * 100vw;
    color: #d81e06;
  }
}
</style>
